<template>
  <div class="all_login">
    <div class="login_logo flex">
      <h1>欢迎光临</h1>
    </div>
    <div class="login_box flex">
      <div class="login_main">
        <h2>欢迎回来</h2>
        <el-input class="mar_t_10" v-model="username" :prefix-icon="User" clearable></el-input>
        <el-input class="mar_t_10" type="password" :prefix-icon="Lock" v-model="password" show-password></el-input>
        <el-button style="width: 100%" class="mar_t_10" type="primary" @click="userStore.getLoginAct({ username, password })" round> 提交 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Lock, User } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/user';
let userStore = useUserStore();
let username = ref('');
let password = ref('');
</script>

<style lang="scss" scoped>
.all_login {
  display: flex;
  width: 100vw;
  height: 100vh;

  .login_logo {
    flex: 1;
    background: #6466e9;
    color: #fff;
  }

  .login_box {
    width: 40%;

    .login_main {
      width: 250px;
      text-align: center;

      h2 {
        margin-bottom: 10px;
        font-size: 30px;
      }
    }
  }
}
</style>
